<template>
	<view>
		<uni-section title=" ">
			<u--form
			class="from-card"
			labelPosition="left"
			labelWidth="80">
				<view style="position: relative;" v-for="(expenseDetail,index) in expenseDetailList" :key="index">
					<uni-group :title="'报销明细 '+(index+1)" top="-10">
						<u-form-item label="报销金额">
							<u--input
							disabled
							disabledColor="#ffffff"
							v-model="expenseDetail.amount"
							placeholder="请输入"
							inputAlign="right"
							border="none"
							type="digit"
							></u--input>
						</u-form-item>
						<u-form-item label="报销类型">
							<u--input
							disabled
							disabledColor="#ffffff"
							v-model="expenseDetail.type"
							placeholder="请选择"
							inputAlign="right"
							border="none"
							></u--input>
						</u-form-item>
						<u-form-item label="报销内容">
							<u--textarea
							disabled
							auto-height
							disabledColor="#ffffff"
							v-model="expenseDetail.detailed">
							</u--textarea>
						</u-form-item>
						<u-form-item label="提交人">
							<u--input
							disabled
							disabledColor="#ffffff"
							v-model="expenseDetail.createBy"
							inputAlign="right"
							border="none"
							></u--input>
						</u-form-item>
					</uni-group>
				</view>
			</u--form>
			
			<uni-group :title="'总报销金额(元):'+amountAll">
				<!-- <text>图片</text>
				<view style="margin-top: 20rpx;position: relative;;;display: flex;line-height: 28upx;" v-for="(item,index) in imageList">
					<image :src="item.url" style="width: 80rpx;height: 80rpx;"></image>
				</view> -->
				<u--form
				v-if="imageList.length>0"
				class="from-card"
				labelPosition="top"
				labelWidth="180">
					<u-form-item label="图片">
						<u-upload
							:fileList="imageList"
							:multiple="true"
							:maxCount="imageList.length"
							:disabled="true"
							:deletable="false">
						</u-upload>
					</u-form-item>
				</u--form>
			</uni-group>
		</uni-section>
		
		<uni-section title="流程" type="line">
			<view class="per-list per-all">
				<view v-for="(item,index) in flowTaskList">
					<view class="list_user">
						<view class="left">
							<u-avatar
								v-if="item.avatar"
								:src="item.avatar"
								customStyle="width:100%;height:100%;"
								shape="square"
								size="35">
							</u-avatar>
							<u-avatar
								v-else
								customStyle="width:100%;height:100%;"
								:text="item.userName.slice(1)"
								bgColor="#0087FC"
								shape="square"
								size="35"
								:fontSize="item.userName.length > 2?12:15">
							</u-avatar>
							<view class="list_left_icon">
								<icon class="icon-box-img" type="waiting" size="15" color="#DD8E59" v-if="item.status == '0'"></icon>
								<icon class="icon-box-img" type="success" size="15" v-if="item.status == '1'"></icon>
								<icon class="icon-box-img" type="warn" size="15" v-if="item.status == '2'"></icon>
							</view>
						</view>
						<view class="right">
							<view class="line1"><text>审批人</text><text v-if="item.status=='1'||item.status=='2'">{{item.updateTime}}</text></view>
							<view class="line2">
								<text>{{item.userName+(item.status == '2'?'(已拒绝)':'')}}</text>
							</view>
						</view>
					</view>
					<view class="list_user" v-if="item.status == '2'">
						<view class="left"></view>
						<view class="right">
							<!-- 拒绝理由 -->
							<view class="line3">
								<text>{{item.opinion}}</text>
							</view>
						</view>
					</view>

					<view class="list_line" v-if="index != flowTaskList.length-1"><view class="line"></view></view>
					<!-- <view class="list_line"><view class="lineDash"></view></view> -->
				</view>
				<view style="margin-top: 40rpx;" v-if="flowCsList && flowCsList.length > 0">
					<text>抄送人</text>
					<view class="per-list-csr" style="margin-top: 10rpx;">
						<view class="csr-item" v-for="(item,index) in flowCsList">
							<view class="pers-pic">
								<u-avatar
									v-if="item.avatar"
									:src="item.avatar"
									shape="square"
									size="35">
								</u-avatar>
								<u-avatar
									v-else
									:text="item.userName.slice(1)"
									bgColor="#0087FC"
									shape="square"
									size="35"
									:fontSize="item.userName.length > 2?12:15">
								</u-avatar>
								<view style="margin-top: 10rpx;">
									<text class="pers-name">{{item.userName}}</text>
								</view>
							</view>
							<view class="csr-icon" v-if="index != flowCsList.length-1">
								<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-section>
		
		<view class="submit-button" v-if="expense.status == 0&&spType == '用户'">
			<view style="background-color: #9a9d9f;" class="submit-block" @click="submit()">
				撤 销
			</view>
		</view>
		<view class="submit-button" v-if="expense.status == 0&&spType == '审批'">
			<view class="submit-block">
				<view class="submit-block_item" @click="gotoApprovePage('1')">同 意</view>
				<view class="submit-block_item" @click="gotoApprovePage('2')">拒 绝</view>
			</view>
		</view>
		
		<view class="qz">
			<span v-if="expense.status == 1"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/49d884b6a24c4f9cb645b551a974dec3.png" /></span>
			<span v-if="expense.status == 2"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/a2ef1372c79d42aeb3adec735fd6826e.png" /></span>
			<span v-if="expense.status == 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/87530e13f0954b08b12f43b8998a6e14.png" /></span>
		</view>
	</view>
</template>

<script>
	import { getInfo,revoke } from '@/api/expense.js'
	export default {
		data() {
			return {
				spType:'用户',
				type:'',
				imageList:[],
				amountAll:0,
				expense:{},
				expenseDetailList:[],
				flowTaskList:[],
				flowCsList:[],
				czId:''
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
			this.spType = option.spType
			this.type = option.type
			this.czId = option.id
		},
		methods: {
			gotoApprovePage(statusType){
				if (statusType=="1") {
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=1&type='+this.type+'&tbId='+this.expense.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
								eventChannel.emit('refreshPage', data);
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=2&type='+this.type+'&tbId='+this.expense.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}
			},
			submit(){
				uni.showModal({
				  content: '确定要撤销申请吗？',
				  showCancel: true,
				  confirmText: '确定',
				  cancelText: '取消',
				  success: res => {
				    if (res.confirm) {
						this.doRevoke(this.expense.id)
				    }
				  }
				})
			},
			async doRevoke(id){
				const { data } = await revoke(id);
				if(data.code == 200){
					uni.showToast({
						title: '撤销成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 500)
				}
			},
			async getDetail(id){
				const { data } = await getInfo(id);
				if(data.code == 200){
					this.expense.status = data.data.status
					this.expense.id = data.data.id
					this.expenseDetailList = data.data.expenseDetailList
					this.flowTaskList = data.data.flowTaskList
					this.flowCsList = data.data.flowCsVoList
					this.amountAll = data.data.expenseDetailList.map(e=>e.amount).reduce((a,b)=>parseInt(a)+parseInt(b))
					if(data.data.images!=''){
						data.data.images.split(',').forEach(e=>{
							this.imageList.push({url:e})
						})
					}
				}
			},
		}
	}
</script>

<style>
.per-list.per-all {
	padding: 30rpx;
}
.list_user {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}
.list_user .left {
	position: relative;
	width: 10%;
	font-size: 1em !important;
}
.list_left_icon {
	position: absolute;
	bottom: 0;
	right: 0;
}
.list_user .right {
	width: 85%;
}
.list_user .right .line1 {
	display: flex;
	justify-content: space-between;
	color: #999;
}
.list_user .right .line2 {
	color: #666;
}
.list_user .right .line3 {
	padding: 10rpx;
	background-color: #d4d4d4;
	border-radius: 0 10rpx 10rpx 10rpx;
	line-height: 2;
	color: #666;
	font-size: 25rpx;
}
.list_line {
	width: 10%;
	text-align: center;
}
.list_line .line {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx solid #aaa;
	border-radius: 5rpx;
}
.list_line .lineDash {
	display: inline-block;
	vertical-align: middle;
	height: 60rpx;
	border-left: 6rpx dashed #aaa;
	border-radius: 5rpx;
}

	.per-list {
		margin-right: 50rpx;
	}
	
	.pers-pic {
		height: 65rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 85rpx;
		width: 26rpx;
	}
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	}
	.submit-block_item {
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	.submit-block_item:nth-child(2) {
		background-color: #9a9d9f;
	}
	.per-list-csr {
		display: flex;
		justify-content: left;
	}
	.per-list-csr .csr-item {
		text-align: center;
		display: flex;
	}
	.csr-item .csr-icon  {
		display: flex;
		margin: 0 10rpx;
	}
	
	.qz {
	  position: absolute;
	  right: 80rpx;
	  top: 40rpx;
	}
	.qz image {
	  width: 150rpx;
	  height: 150rpx;
	}
	.list_left_icon {
		background-color: #fff;
		border-radius: 50%;
	}
	.list_left_icon icon{
		vertical-align: bottom;
		display: block;
	}
	.submit-button .submit-block {
		background-color: #fff;
	}
</style>
